<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        #box{margin: 0 auto;position: relative;}
        .item {box-shadow: 2px 2px 2px #999;position: absolute;}
    </style>
</head>
<body>
    <div id="box">
        <div class="item"><img src="img/01.jpg"></div>
        <div class="item"><img src="img/02.jpg"></div>
        <div class="item"><img src="img/03.jpg"></div>
        <div class="item"><img src="img/04.jpg"></div>
        <div class="item"><img src="img/05.jpg"></div>
        <div class="item"><img src="img/06.jpg"></div>
        <div class="item"><img src="img/07.jpg"></div>
        <div class="item"><img src="img/08.jpg"></div>
        <div class="item"><img src="img/09.jpg"></div>
        <div class="item"><img src="img/10.jpg"></div>
        <div class="item"><img src="img/11.jpg"></div>
        <div class="item"><img src="img/12.jpg"></div>
        <div class="item"><img src="img/13.jpg"></div>
        <div class="item"><img src="img/14.jpg"></div>
        <div class="item"><img src="img/15.jpg"></div>
        <div class="item"><img src="img/16.jpg"></div>
        <div class="item"><img src="img/17.jpg"></div>
    </div>
    <script>
        window.onload = function(){
            const reg = 10
            var box = document.querySelector('#box')
            var items = Array.from(box.querySelectorAll('.item'))
            var imgs = box.querySelectorAll('img')
            var width = items[0].offsetWidth
            var cols = Math.floor(window.innerWidth / (width + reg))
            box.style.width = cols * width + (cols-1) * reg +'px'
            var len =0 
            var arr = []
            waterfull()
            function waterfull () {
                if(len ===0) arr = []
                for(var i=len;i<items.length;i++){
                    if(i<cols){
                        items[i].style.left = i * (width + reg) + 'px'
                        items[i].style.top = 0
                        arr.push(items[i].offsetHeight)
                    }else{
                        var minIndex = 0
                        for(var j=1;j<arr.length;j++){
                            if(arr[minIndex] > arr[j]) minIndex = j
                        }
                        var minHeight = arr[minIndex]
                        items[i].style.left = minIndex  * (width + reg) + 'px'
                        items[i].style.top = minHeight + reg + 'px'
                        arr[minIndex] = minHeight + items[i].offsetHeight + reg
                    }
                }
            }
            

            var timer = null

            window.onscroll = function (){
                var maxHeight = Math.max(...arr)
                var maxIndex = arr.indexOf(maxHeight)
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                if(scrollTop >= maxHeight - window.innerHeight - 11){
                    clearTimeout(timer)
                    len = items.length
                    timer = setTimeout(function(){
                        console.log('到底部')
                        setTimeout(()=>{
                            var json = [
                                "img/01.jpg",
                                "img/02.jpg",
                                "img/03.jpg",
                                "img/04.jpg",
                                "img/05.jpg",
                                "img/06.jpg",
                                "img/07.jpg",
                                "img/08.jpg",
                                "img/09.jpg",
                                "img/10.jpg",
                                "img/11.jpg",
                                "img/12.jpg",
                                "img/13.jpg",
                                "img/14.jpg",
                                "img/15.jpg",
                                "img/16.jpg",
                                "img/17.jpg"
                            ]
                            var divs = json.map(function(ele){
                                var div = document.createElement('div')
                                div.classList.add('item')
                                div.innerHTML = `<img src=${ele}>`
                                box.appendChild(div)
                                return div
                            })
                            items = items.concat(divs)
                            var n=0
                            divs.forEach((ele) =>{
                                ele.querySelector('img').onload = function(){
                                    n++
                                    if(n == divs.length){
                                        waterfull()
                                    }
                                }
                            }) 
                        },1000)
                    },100)
                }
            }
            window.onresize = function (){
                var cols1 = Math.floor(window.innerWidth / (width + reg))
                if(cols1 !=cols){
                    cols = cols1
                    len = 0
                    box.style.width = cols * width + (cols-1) * reg +'px' 
                    waterfull()
                }
            }
        }
    </script>
</body>
</html>